<template>
  <div class="map-page">
    <div class="page-top">
      <img class="map-img" src="../assets/map-icon.png" alt="" />
      <div id="container" style="width: 100%; height: 300px"></div>
    </div>
    <div class="page-bottom">
      <div class="search-box">
        <input type="text" v-model="keyWord" @input="handleSearch" />
      </div>
      <div class="poi-box">
        <div
          class="poi-item"
          v-for="(item, index) in surroundingPois"
          :key="index"
          @click="handleSelect(item)"
        >
          {{ item.title }}
          <div class="address">{{ item.address }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
var BMap = "";
import loadBMap from "@/utils/loadBMap";
export default {
  data() {
    return {
      map: "", //地图实例
      surroundingPois: [], //周边点
      keyWord: "", //关键词
      city: "", //当前定位城市
      mPoint: "", //实例
    };
  },
  async mounted() {
    BMap = await loadBMap("dUycbxsGx24if6NFSeYGU7bgrlsjMRTk");
    this.initMap();
  },
  methods: {
    initMap() {
      let that = this;
      this.geolocation();
      this.map = new BMap.Map("container", { enableMapClick: false }); //新建地图实例，enableMapClick:false ：禁用地图默认点击弹框
      this.mPoint = new BMap.Point(113.30765, 23.12005);
      this.map.centerAndZoom(this.mPoint, 16);
      this.map.addEventListener("click", function (e) {
        //给地图绑定点击事件
        that.getAddrByPoint(e.point); //点击后调用逆地址解析函数
      });
      this.map.addEventListener("dragend", function () {
        //给地图绑定点击事件
        that.getAddrByPoint(that.map.getCenter()); //点击后调用逆地址解析函数
      });
    },
    /**
     * 逆地址解析函数（根据坐标点获取详细地址）
     * @param {Object} point   百度地图坐标点，必传
     */
    getAddrByPoint(point) {
      let that = this;
      let geco = new BMap.Geocoder();
      geco.getLocation(point, function (res) {
        console.log(res); //内容见下图
        that.map.panTo(point, 1); //将地图的中心点更改为给定的点
        that.surroundingPois = res.surroundingPois;
      });
    },
    /**
     * 地址解析搜索
     */
    getPoint() {
      let that = this;
      let myGeo = new BMap.Geocoder();
      myGeo.getPoint(
        this.keyWord,
        function (point) {
          if (point) {
            console.log("point", point);
            that.getAddrByPoint(point); //点击后调用逆地址解析函数
          }
        },
        this.city
      );
    },
    /**
     * 浏览器定位函数
     */
    geolocation() {
      let that = this;
      let geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(
        function (res) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            that.city = res.address.city;
            that.getAddrByPoint(res.point); //当成功时，调用逆地址解析函数
          } else {
            alert("failed" + this.getStatus()); //失败时，弹出失败状态码
          }
        },
        { enableHighAccuracy: true }
      ); //enableHighAccuracy：是否要求浏览器获取最佳效果，默认为false
    },
    //选择的位置
    handleSelect(item) {
      console.log(item, "item");
      alert(item.title);
    },
    handleSearch() {
      //this.getPoint(); //地址解析搜索
      this.tipSearch(); //提示搜索
    },
    /**
     * 提示搜索
     */
    tipSearch() {
      let that = this;
      let local = new BMap.LocalSearch(this.map, {
        //智能搜索
        onSearchComplete: function (res) {
          console.log(res, "搜索结果");
          if (res?.Kr?.length) {
            that.surroundingPois = res.Kr;
          }
        },
      });
      local.search(this.keyWord, this.mPoint, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.page-top {
  position: relative;
  .map-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999999999;
  }
}
.page-bottom {
  margin-top: 20px;
  .search-box {
    input {
      width: 100%;
    }
  }
  .poi-box {
    .poi-item {
      text-align: left;
      .address {
        font-size: 13px;
        color: #ccc;
      }
    }
  }
}
</style>
